<template>
  <div class="manage">
    <el-button :icon="Edit" :plain="true" class="cancel">批量管理</el-button>
    <ul class="LikeManage">
      <li v-for="(item,index) in myConcernList" class="myLikeList" :key="index">
        <div class="likeItem">
          <div class="imageItem">
            <img :src="item.avatar" style="width: 100%;height: 100%;">
          </div>
          <p>{{ item.username}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup >
import {
  Edit,
} from '@element-plus/icons-vue'
import {ref,onMounted} from "vue";
import {findMyConcernByUserId} from "@/api/manage.js";
import {useAlertsStore} from "@/store/modules/home.js";
import axios from "axios";
const store = useAlertsStore()
const myConcernList = ref([])
const findMyConcernByUser = async () => {
  const {user:{id}} = store.UserInfo
  let res = await findMyConcernByUserId(id)
  // let res =  axios.get(`http://127.0.0.1:9999/video/findMyLikesByUserId/9`)
  if(res.code === '20000'){
    myConcernList.value = res.list
    console.log(myConcernList.value,'我的关注')
  }
}
onMounted(()=>{
  findMyConcernByUser()
})
</script>

<style scoped lang="less">

.manage{
  display: flex;
  flex-direction: column;
  align-items: start;
  .cancel{
    margin-bottom: 10px;
  }
}
::-webkit-scrollbar {
  width: 0.5em;
}
.LikeManage{
  width: 100%;
  height: 550px;
  overflow: scroll;
  display: flex;
  flex-wrap: wrap;
  .LikeLi{
    margin-right: 20px;
    margin-bottom: 10px;
  }
}
.likeItem{
  display: flex;
  flex-direction: column;
  align-items: center;
  .imageItem{
    width: 150px;
    height: 200px;
    margin: 5px;
    border-radius: 8px;
    background-color: pink;
  }
}
.el-button.is-plain {
  --el-button-hover-text-color: var(--el-color-primary);
  --el-button-hover-bg-color: var(--el-fill-color-blank);
  --el-button-hover-border-color: var(--el-color-primary);
  background-color: transparent;
}
</style>